<script lang="ts" setup>
import { ref, defineEmits, watchEffect, computed, nextTick } from "vue";
import { Picker, Popup, Field, type FieldTextAlign, type PickerColumn, type FieldRule } from "vant";

interface selectInfo {
	label?: string; // 标题
	name?: string; // 表单提交时name，取值是text
	columns: PickerColumn; // 下拉选项
	modelValue: string | number;
	placeholder?: string;
	required?: boolean; // 是否必填，默认否
	allowClear?: boolean; // 是否需要删除按钮，默认否
	rules?: FieldRule[]; // 验证规则
	vertical?: boolean; // 是否是垂直布局
}

const propsData = withDefaults(defineProps<selectInfo>(), {
	placeholder: "请选择",
});

const emits = defineEmits<{
	(e: "update:modelValue", val: any): void;
	(e: "onConfirm", val: any): void;
	(e: "onClear"): void;
}>();

const showPicker = ref(false); // 是否展示弹窗选择
const rightIcon = ref(""); // 右侧清空图标
const isLink = ref(true); // 是否展示箭头
const labelAlign: FieldTextAlign = propsData.vertical ? "top" : "left"; // 标题对齐方式

// 选择器的双向绑定
const selectedValues = ref<(string | number)[]>([]);

// 文字展示
const fieldVal = ref<string | number>("");

// 确定选择后更新绑定值
const onConfirm = (selectedOptions: any) => {
	console.log("更新值");
	showPicker.value = false;
	emits("update:modelValue", selectedOptions.selectedValues[0]);
	emits("onConfirm", selectedOptions);
};

// 点击事件，避免关闭按钮与其他事件重复
const inputClick = (e: any) => {
	if (e.target.className.indexOf("van-icon-clear") !== -1) {
		console.log("清空事件");

		// 清空时重置为第一个选项
		if (propsData.columns[0].value !== undefined) {
			selectedValues.value = [propsData.columns[0].value];
		}

		emits("update:modelValue", "");
		emits("onClear");
	} else {
		showPicker.value = true;
	}
};

const getValue = computed(() => {
	return propsData.modelValue;
});

/**
 * @description: 根据选中的值获取对于的文本
 */
const getTextByValue = computed(() => {
	let value: string | number = "";
	const arr = propsData.columns;
	for (let i = 0; i < arr.length; i++) {
		const element = arr[i];
		if (element.value === propsData.modelValue) {
			if (element.text !== undefined) {
				value = element.text;
			}
			break;
		}
	}
	return value;
});

watchEffect(() => {
	console.log("触发更新", propsData.modelValue);

	// 有值且允许清除时出来清空按钮
	if (propsData.modelValue && propsData.allowClear) {
		rightIcon.value = "clear";
		isLink.value = false;
	} else {
		rightIcon.value = "";
		isLink.value = true;
	}

	// 选择器更新
	selectedValues.value = [propsData.modelValue];

	// 文本值更新
	fieldVal.value = getTextByValue.value;
});
</script>

<template>
	<field
		v-model="fieldVal"
		readonly
		input-align="left"
		:label-align="labelAlign"
		:label="propsData.label"
		:placeholder="propsData.placeholder"
		:required="propsData.required"
		:rules="propsData.rules"
		:right-icon="rightIcon"
		:is-link="isLink"
		@click="inputClick" />

	<!-- 只负责取值不展示 -->
	<field style="display: none" type="hidden" :name="propsData.name" v-model="getValue" />

	<popup v-if="showPicker" v-model:show="showPicker" round position="bottom">
		<picker
			v-model="selectedValues"
			:columns="propsData.columns"
			@cancel="showPicker = false"
			@confirm="onConfirm" />
	</popup>
</template>
